<template>
    <div class="child1">
        <h3>子组件1</h3>
        <h4>玩具：{{ toy }}</h4>
        <button @click="emitter.emit('send-toy', toy)">玩具给弟弟</button>
    </div>
</template>

<script setup lang="ts" name="Child1">
import { ref } from 'vue'
import emitter from '@/utils/emitter'
const toy = ref('变形金刚')
/**
 概述：与消息订阅与发布（`pubsub`）功能类似，可以实现任意组件间通信。
    安装`mitt`
    npm i mitt
接收数据的组件中：绑定事件、同时在销毁前解绑事件：

**注意这个重要的内置关系，总线依赖着这个内置关系**
 */
</script>

<style scoped>
.child1 {
    margin-top: 50px;
    background-color: skyblue;
    padding: 10px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
}

.child1 button {
    margin-right: 10px;
}
</style>
